import * as vscode from 'vscode';
import * as path from 'path';

export function activate(context: vscode.ExtensionContext) {
  let disposable = vscode.commands.registerCommand('myExtension.showWebview', () => {

	console.log('Showing Vue Webview');
	
    const panel = vscode.window.createWebviewPanel(
      'vueWebview',
      'Vue Webview',
      vscode.ViewColumn.One,
      {
        enableScripts: true,
        localResourceRoots: [vscode.Uri.joinPath(context.extensionUri, 'dist')],
      }
    );

    const scriptUri = panel.webview.asWebviewUri(
      vscode.Uri.joinPath(context.extensionUri, 'dist', 'webview', 'webview.js')
    );

    const styleUri = panel.webview.asWebviewUri(
      vscode.Uri.joinPath(context.extensionUri, 'dist', 'webview', 'extension-demo.css')
    );    

    console.log('Script URI:', scriptUri.toString());
    panel.webview.html = getWebviewContent(scriptUri,styleUri);
  });

  context.subscriptions.push(disposable);
}

function getWebviewContent(scriptUri: vscode.Uri,styleUri: vscode.Uri): string {  
  return `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="${styleUri}">
      <title>Vue Webview</title>
    </head>
    <body>
      <div id="app"></div>
      <script src="${scriptUri}"></script>
    </body>
    </html>
  `;
} 